<template>
	<div class="content">
		
		<orderHeader msg="咚咚哒哒美食店" :state="2"></orderHeader>
		<div class="payment-order border-shadow1">
			<div class="payment-order-detail">
				<div class="payment-order-detail-left">
					<div><span>订单提交成功，请进行支付！</span></div>
					<div><span>订单号：{{userOrder.order_id}}</span></div>
					<div class="font-size-13 font-style-normal">请您在<span class="count-down">{{m}}:{{s}}</span>内完成支付，否者订单会被自动取消</div>
					<div class="other-information font-style-normal font-size-15">
						<span>收获地址: {{userOrder.userAddress.receiver_address}}</span>
						<span>收货人: {{userOrder.userAddress.receiver_name}}</span>
						<span>电话号码: {{userOrder.userAddress.receiver_telephone}}</span>
					</div>
					<div class="font-size-15" style="width: 750px;">
						<span>商品名称：</span>
						<span style="margin-right: 5px;" v-for="orderDetail of userOrderDetailList">{{orderDetail.food_name}}×{{orderDetail.food_amount}}</span>
					</div>
				</div>
				<div class="payment-order-detail-right">
					<div>应付金额<span class="amount-payable">{{parseFloat(userOrder.order_true_price).toFixed(2)}}</span>元</div>
				</div>
			</div>
		</div>
		<div class="payment-way-content border-shadow1">
			<div class="font-size-18" style="justify-content: space-between;">
				<span>中软餐厅支付</span>
				<el-button type="danger" round size="small" @click="concel">取消订单</el-button>
			</div>
			<div class="hr"></div>
			<div class="payment-way-content-select">
				<div class="payment-type-items">
					<div class="payment-type-item">
						<div :class="paymentTypeItemClass === 1? 'payment-type-selected':''" @click="changePaymentType(1)">
							<div class="checkBox"></div>
						</div>
						<div><i class="iconfont iconweixin" style="font-size: 25px;"></i></div>
						<div class="font-weight-700" style="margin-left: 3px;">微信</div>
					</div>
					<div class="payment-type-item">
						<div :class="paymentTypeItemClass === 2? 'payment-type-selected':''" @click="changePaymentType(2)">
							<div class="checkBox"></div>
						</div>
						<div><i class="iconfont iconumidd17" style="font-size: 25px;"></i></div>
						<div class="font-weight-700" style="margin-left: 3px;">支付宝</div>
					</div>
				</div>
			</div>
			<div class="payment-QRcode">
				<div @click="paidClick" style="cursor: pointer;" id="qrcode"></div>
			</div>
		</div>
	</div>
</template>

<script>
	import orderHeader from "@/components/Order/OrderHeader/OrderHeader.vue"
	import QRCode from "qrcodejs2"
	import PaymentService from "./PaymentService.js"
	import tools from "@/tools/tools.js"


	export default {
		name: "Payment",
		data() {
			return {
				paymentTypeItemClass: 1,
				userOrder: {},
				userOrderDetailList: [],
				orderCreateTime: '',

				m: '',
				s: '',
				
				ws: '',
			}
		},
		components: {
			orderHeader,
			QRCode,
		},
		created() {
			let orderId = this.$route.params.order_id;
			PaymentService.getGoodOrderService(orderId, res => {
				this.userOrder = res.usergoodorder;
				this.orderCreateTime = res.usergoodorder.order_create_time;
				// console.log(res);
			});
			PaymentService.getAllDetailService(orderId, res => {
				this.userOrderDetailList = res.usergoodorderlist;
				// console.log(res);
			});
			this.countTime();
			this.qrcode();
		},
		methods: {
			qrcode() {
				setTimeout(function() {
					let qrcode = new QRCode('qrcode', {
						width: 300,
						height: 300, // 高度
						text: '请向我支付一百万', // 二维码内容
						render: 'canvas', // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
						background: '#f0f',
						foreground: '#ff0'
					});
				}, 500);
			},
			paidClick() {
				let goodOrder = this.userOrder;
				goodOrder.order_pay_time = tools.dateFtt("yyyy-MM-dd hh:mm:ss", new Date());
				if(this.paymentTypeItemClass === 1){
					goodOrder.pay_style = 41;
				}else{
					goodOrder.pay_style = 42;
				}
				goodOrder.status = 14;
				PaymentService.updateGoodOrderService(goodOrder,res=>{
					console.log(res);
					
						PaymentService.insertPointDetailService({
							order_id: res.updateAim.order_id,
							user_true_name: res.updateAim.order_owner_name,
							point_change_amount:  Math.floor(res.updateAim.order_true_price/10),
							point_change_id: 51,
						},re=>{
							//console.log(re);
						})
					this.createConnection();
					this.$router.push({
						name: 'Paid',
						params: {
							order_id: res.updateAim.order_id,
						}
					});
				});
			},
			concel(){
				let goodOrder = this.userOrder;
				goodOrder.status=12;
				alert("取消成功！")
				PaymentService.updateGoodOrderService(goodOrder,res=>{
					console.log(res);
					this.createConnection();
					this.$router.push({
						name: 'PersonalHistoryOrder',
						
					});
				});
			},
			changePaymentType(index) {
				this.paymentTypeItemClass = index;
			},
			countTime() {
				//获取当前时间
				let date = new Date();
				//获得结束时间
				let createTime = new Date(this.orderCreateTime);
				let min = createTime.getMinutes();
				createTime.setMinutes(min + 30);
				//设置截止时间
				//时间差
				let differtime = createTime.getTime() - date.getTime();
				if (differtime >= 0) {
					this.m = Math.floor((differtime / 1000 / 60) % 60)
					this.s = Math.floor((differtime / 1000) % 60)
				}
				setTimeout(this.countTime, 1000);
			},
			wsOpen(){
				console.log('websocket-连接已经建立');
				this.ws.send(this.userOrder.order_id);
				this.ws.close();
			},
			wsError(){
				console.log('websocket-出现错误');
			},
			wsClose(){
				console.log('websocket-连接已经关闭');
			},
			createConnection(callBack){
				if ('WebSocket' in window) {
					this.ws = new WebSocket(`ws://localhost:8080/wss`);
					this.ws.onopen = this.wsOpen;
					this.ws.onclose = this.wsClose;
					this.ws.onerror = this.wsError;
				} else {
					alert('该浏览器不支持订单提醒!');
				};
			},
		}
	}
</script>

<style lang="less">
	@import "../Order.less";
	@import "../../../style/Common.less";

	.payment-order {
		margin-top: 3px;
		padding: 10px;
	}

	.payment-order-detail {
		display: flex;
		justify-content: space-between;
		align-items: center;

		.payment-order-detail-left {
			width: 80%;

			>div {
				margin-top: 5px;
			}
		}

		.payment-order-detail-right {}
	}

	.payment-way-content {
		margin: 20px 0;
		padding: 10px;

	}

	.payment-way-content-select {
		display: flex;

		.payment-type-items {
			margin: 10px auto;
			display: flex;

			.payment-type-item {
				display: flex;
				margin: 0 50px;
				font-size: 20px;

				>div:nth-child(2) {
					margin-left: 10px;
				}
			}

			.payment-type-selected {
				background: url(../../../assets/img/select1.png) no-repeat;
				background-size: 24px 24px;
			}
		}
	}

	.payment-QRcode {
		margin: 20px 0;

		#qrcode {
			width: 300px;
			height: 300px;
			margin: 0 auto;
		}
	}

	.count-down {
		color: #FF0000;
	}

	.amount-payable {
		font-size: 32px;
		color: #e31613;
	}
	.font-size-18 {
		display: flex;
		justify-content: space-between;
	}
	.other-information {
		padding-top: 10px;

		>span {
			margin-right: 15px;
		}
	}
</style>
